<template>
  <Card>
    <Row>
      <Col span="8">
        <div class="userNameDiv">
          <span style="font-size: 65px;font-style:italic;padding-left: 20px;padding-right: 50px;">{{formData.username}}</span>
          <img class="avatarImg" v-if="formData.iconUrl" @click="toggleShow" :src="formData.iconUrl"  alt="点击修改">
          <Icon v-else class="avatarImg" @click="toggleShow" type="ios-camera" size="100" style="padding-top: 15px"></Icon>
        </div>
        <Tabs>
          <TabPane label="基本信息" icon="ios-person">
            <Form :model="formData" :label-width="80">
              <FormItem label="姓名">
                <Input v-model="formData.name" placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem label="E-mail" prop="mail">
                <Input v-model="formData.mail" placeholder="Enter your e-mail"></Input>
              </FormItem>
              <FormItem label="性别"  prop="gender">
                <RadioGroup v-model="formData.gender">
                  <Radio label="0">男</Radio>
                  <Radio label="1">女</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="手机号码" prop="mail">
                <Input v-model="formData.mobile" placeholder="Enter your e-mail"></Input>
              </FormItem>
              <FormItem label="证件类型"  prop="identityType">
                <code-type-tag v-model="formData.identityType" code-type="PCredentialType" placeholder="请选择证件类型"/>
              </FormItem>
              <FormItem label="证件号码"  prop="identityNo">
                <label>
                  <Input v-model="formData.identityNo" placeholder="请选择证件号码"></Input>
                </label>
              </FormItem>
              <FormItem label="联系地址" prop="address">
                <label>
                  <Input v-model="formData.address"></Input>
                </label>
              </FormItem>
              <FormItem>
                <Button type="primary">保存</Button>
              </FormItem>
            </Form>
          </TabPane>
          <TabPane label="帐号信息" icon="ios-lock">
            <Form :model="formData" :label-width="80">
              <FormItem label="用户名">
                <Input v-model="formData.username" readonly placeholder="Enter something..."></Input>
              </FormItem>
              <FormItem label="原密码" prop="mail">
                <Input type="password" password v-model="formData.mobile" placeholder="Enter your e-mail"></Input>
              </FormItem>
              <FormItem label="新密码"  prop="identityType">
                <Input  type="password" password  v-model="formData.mobile" placeholder="Enter your e-mail"></Input>
              </FormItem>
              <FormItem label="确认密码"  prop="identityNo">
                <label>
                  <Input type="password" password  v-model="formData.mobile" placeholder="Enter your e-mail"></Input>
                </label>
              </FormItem>
              <FormItem>
                <Button type="primary">修改密码</Button>
              </FormItem>
            </Form>
          </TabPane>
        </Tabs>

      </Col>
    </Row>
    <my-upload field="file"
               @crop-success="cropSuccess"
               @crop-upload-success="cropUploadSuccess"
               @crop-upload-fail="cropUploadFail"
               v-model="show"
               :width="360"
               :height="360"
               :noRotate="false"
               url="share/platform-service/FastDFS/uploadIcon"
               :headers="headers"
               img-format="png"></my-upload>

  </Card>
</template>
<script>
import myUpload from 'vue-image-crop-upload/upload-2.vue';
import {getMyself} from "@/api/userApi";
import codeTypeTag from '@/components/codeType/code-type-tag'
export default {
  components: {
    myUpload,
    codeTypeTag
  },
  data () {
    return{
      show: false,
      formData:{
        iconUrl: '',
        identityType: '',
      },
      headers: {
        Authorization: ''
      },
      imgFile:'',
      baseURL: 'file/',
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
    /**
     * crop success
     *
     * [param] imgDataUrl
     * [param] field
     */
    cropSuccess(imgDataUrl, field){
      console.log('-------- crop success --------');
    },
    /**
     * upload success
     *
     * [param] jsonData  server api return data, already json encode
     * [param] field
     */
    cropUploadSuccess(jsonData, field){
      console.log('-------- upload success --------');
      console.log(jsonData);
      if (jsonData){
        this.formData.iconUrl = this.baseURL+ jsonData.result;
        this.$store.getters.userData.icon_url = jsonData.result
      }
      console.log('field: ' + field);
    },
    /**
     * upload fail
     *
     * [param] status    server api return error status, like 500
     * [param] field
     */
    cropUploadFail(status, field){
      console.log('-------- upload fail --------');
      console.log(status);
      console.log('field: ' + field);
    },
  },
  mounted () {
    this.headers = {Authorization:'Bearer '+sessionStorage.getItem('userToken')};
    getMyself().then(res=>{
      this.formData = res;
      if (this.formData.iconUrl){
        this.formData.iconUrl = this.baseURL+this.formData.iconUrl
      }
    })
  }
}
</script>
<style>
.avatarImg{
  width: 150px; height: 150px; border-radius: 50%;
  border: 1px dashed lightslategrey;
}

.avatarImg:hover {
  border: 1px dashed blue;
}
.userNameDiv *{
  vertical-align:middle;
  margin-bottom: 10px;
}

</style>
